import { create } from 'zustand';
import { type Node, type Edge, BackgroundVariant, PanelPosition } from '@xyflow/react';
import { DRAWER_INIT_HEIGHT, DRAWER_LEFT_WIDTH } from '@/constant/config';

type DragNode = {
  label: string;
  type: string;
  [key: string]: any;
}
type Cursour = 'pointer' | 'hand'

// 定义 store 的状态和操作
type DesignerStore = {
  dragNode: DragNode;
  drawerBottomArrow: 'up' | 'down';
  selectedNodes: Node[] | undefined;
  selectedEdges: Edge[] | undefined;
  shouldDrawerUpdate: boolean;
  drawerHeight: number;
  drawerLeftWidth: number;
  cursor: Cursour;
  primaryColor: string;
  background: BackgroundVariant | 'hidden';
  miniMap: PanelPosition | 'hidden';
  setCursor: (cursor: Cursour) => void;
  setDragNode: (dragNode: DragNode) => void;
  setSelectedNodes: (selectedNodes) => void;
  setSelectedEdges: (selectedEdges) => void;
  toggleDrawerArrow: () => void;
  setDrawerHeight: (drawerHeight) => void;
  setDrawerLeftWidth: (drawerWidth) => void;
  setPrimaryColor: (color) => void;
  setBackground: (background: BackgroundVariant | 'hidden') => void;
  setMiniMap: (miniMap: PanelPosition | 'hidden') => void;
};

// 创建 store
const useDesignerStore = create<DesignerStore>((set) => ({
  dragNode: undefined,
  selectedNodes: [],
  selectedEdges: [],
  //下方抽屉
  drawerBottomArrow: 'up',
  shouldDrawerUpdate: true,
  drawerHeight: DRAWER_INIT_HEIGHT,
  drawerLeftWidth: DRAWER_LEFT_WIDTH,
  cursor: 'pointer',
  background: BackgroundVariant.Dots,
  primaryColor: '',
  miniMap: 'bottom-left',

  setPrimaryColor: (color) => set({ primaryColor: color }),
  setBackground: (background) => set({ background: background }),
  setMiniMap: (miniMap) => set({ miniMap }),

  setCursor: (cursor) => set((state) => ({
    ...state,
    cursor
  })),
  setDrawerHeight: (drawerHeight) => set({drawerHeight}),
  setDrawerLeftWidth: (drawerLeftWidth) => set((state) => ({
    ...state,
    drawerLeftWidth
  })),
  setShouldDrawerUpdate: (shouldDrawerUpdate) => set((state) => ({
    ...state,
    shouldDrawerUpdate
  })),
  setDrawerArrow: (drawerBottomArrow) => set((state) => ({
    ...state,
    drawerBottomArrow
  })),
  toggleDrawerArrow: () => set((state) => ({
    ...state,
    drawerBottomArrow: state.drawerBottomArrow === 'up' ? 'down' : 'up'
  })),
  setDragNode: (dragNode) => set({dragNode}),
  setSelectedNodes: (selectedNodes) => set({selectedNodes}),
  setSelectedEdges: (selectedEdges) => set({selectedEdges}),
}));

export default useDesignerStore
